<template>
      <div class="num" :class="count>=num?'active':''">{{ num }}</div>
      <div class="line" v-if="show" :class="count>=num+1?'line1':''"></div>
  </template>
  
  <script setup>
  defineProps({
    num:{
      type:Number,
      default:0
    },
    count:{
      type:Number,
      default:1
    },
    show:{
      type:Boolean,
      default:true
    }
  })
  </script>
  
  <style scoped>
  .num{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid rgb(218, 217, 220);
}
.line{
  width: 200px;
  height: 5px;
  background-color:rgb(218, 217, 220) ;
}
.active{
  border: 1px solid rgb(24, 117, 114);
}
.active+.line1{
  background-color:rgb(24, 117, 114);
}

  </style>